<html>
    <head>
        <title>Mutation Plot Prototype</title>
        <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/bootstrap-2.0.4/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/bootstrap-2.0.4/css/bootstrap-responsive.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/jquery-ui-1.8.23/css/ui-lightness/jquery-ui-1.8.23.custom.css"/>

        <link rel="stylesheet" type="text/css" href="./css/stylesheet.css"/>

        <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/jquery-ui-1.8.23/js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/jquery-ui-1.8.23/js/jquery-ui-1.8.23.custom.min.js"></script>

        <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
        <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/bootstrap-2.1.1/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/d3js-2.9.7/d3.v2.min.js"></script>

        <script type="text/javascript" src="https://cancerregulome.googlecode.com/hg/oncovis_prototype/html/js/controls/listControl.js"></script>

        <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

        <script type="text/javascript" src="./js/applications.js"></script>
        <script type="text/javascript" src="./js/plot.js"></script>
        <script type="text/javascript" src="./js/plot.jquery.js"></script>
        <script type="text/javascript" src="./js/plot_view.js"></script>
        <script type="text/javascript" src="./js/control_view.js"></script>
        <script type="text/javascript" src="./js/summary_view.js"></script>
        <script type="text/javascript" src="./js/legend.js"></script>

        <script type="text/javascript">
            (function ($) {
                $(window).load(function () {
                    var app = MutationViewerApp.create({
                        controls_id: 'div_controls',
                        plot_target_id: 'div_mutationview',
                        summary_id: 'div_summary'
                    });

                    $("#mutation_legend").vislegend(
                            [
                                { label:'Silent', cls:'mutation silent' },
                                { label:'Nonsense', cls:'mutation nonsense' },
                                { label:'Frame Shift', cls:'mutation frame_shift' },
                                { label:'Missense', cls:'mutation missense' },
                                { label:'Other', cls:'mutation NA' }
                            ],
                            {
                                bar_width: 7,
                                label_width: 150
                            }
                    );

                    $("#domain_legend").vislegend(
                            [
                                { label:'PROSITE Profile', cls:'match PROFILE' },
                                { label:'SMART', cls:'match SMART' },
                                { label:'PFAM', cls:'match PFAM' }
                            ],
                            {
                                bar_width: 15,
                                label_width: 150
                            }
                    );
                });
            })(jQuery);
        </script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    <div id="div_controls">
                        <h3>Tumor Subtype List</h3>
                        <div id="sortable_subtypes">
                            <ul id="subtype_list" class="sortable_list"></ul>
                            <div class="well">
                                <h4>Add Subtype</h4>
                                <input id="subtype_add_input" class="typeahead" type="text"/>
                                <button class="subtype_add_button">+</button>
                            </div>
                        </div>
                        <h3>Gene</h3>
                        <div id="gene_select" class="well">
                            <input id="gene_select_input" class="typeahead" type="text"/>
                            <button class="gene_select_button">Draw</button>
                        </div>
                    </div>
                    <div id="div_summary">
                        <h3>Protein</h3>
                        <dl id="protein_info" class="dl-horizontal2">
                            <dt>Name</dt>
                            <dd class="protein_name info_field"></dd>
                            <dt>UniProt ID</dt>
                            <dd class="uniprot_id info_field"></dd>
                            <dt>Entry</dt>
                            <dd class="entry_name info_field"></dd>
                            <dt>Length</dt>
                            <dd class="protein_length info_field"></dd>
                        </dl>
                    </div>
                    <h3>Mutation Legend</h3>
                    <div id="mutation_legend"></div>
                    <h3>Protein Domain Legend</h3>
                    <div id="domain_legend"></div>
                </div>
                <div class="span10">
                    <div id="div_mutationview"></div>
                </div>
            </div>
        </div>
    </body>
</html>
